<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 200px;" class="filter-item" placeholder="订单编号" v-model="filters['order_no']"></el-input>
      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 200px;" class="filter-item" placeholder="会员名称" v-model="filters['username']"></el-input>

      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" size="small" @click="handleFilter">搜索</el-button>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-document" size="small" @click="exportExcelFile">导出</el-button>
    </div>
    <el-table :data="list" @sort-change="sortChange" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">

      <el-table-column type="expand">
        <template slot-scope="props">

          <div class="address-info">
              <div>
            收货地址:{{props.row.address}}
          </div>
          <div>
            收货人:{{props.row.receiver}}
          </div>
          <div>
            联系电话:{{props.row.telephone}}
          </div>
          <div>
            用户留言:{{props.row.words||'--'}}
          </div>
          </div>
        


          <div v-for="item in props.row.items" :key="item.goodsId" class="clearfix goods-item">
            <img :src="item.goodsCover|absUrl" alt="" class="goods-cover">
            <div class="goods-txt">
              <div class="goods-title">
                {{item.goodsTitle}}
              </div>
              <div class="goods-num">
                数量：x{{item.goodsNum}}
                <div class="goods-price-po">
                  {{item.goodsStatus==0?item.lastPrice:item.goodsPrice}}元+{{item.goodsStatus==0?item.lastPoints:item.points}}积分
                </div>
              </div>
              <div class="goods-num">
                供应商：{{item.providerName||'中油BP'}}
              </div>

              <div class="btn-area">
                <el-button v-if="item.goodsStatus==1" type="primary" size="mini" @click="sendOrder(item)">发货</el-button>
              </div>

            </div>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" type="index" label="序号" width="80">
        </el-table-column> -->


      <el-table-column prop="orderNo" align="center" label="订单号" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>


      <el-table-column prop="userName" align="center" label="会员名" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.userName}}</span>
        </template>
      </el-table-column>


      <el-table-column width="140" prop="paymentType" align="center" label="支付方式">
        <template slot-scope="scope">
          <el-tag :type="scope.row.paymentType | paymentTypetagFilter">{{scope.row.paymentType|paymentTypeFilter}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="amount" align="center" label="订单金额(元)" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.amount}}</span>
        </template>
      </el-table-column>


      <el-table-column width="100" prop="status" align="center" label="是否支付">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | payStatusFilter">{{scope.row.status>0?'已支付':'待支付'}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column prop="createTime" align="center" label="下单时间" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>


      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">

          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]" :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog title="发货" :visible.sync="dialogSendDialog" width="600px">
      <el-form class="dialog-form" :rules="rules" ref="dataForm" :model="expressData" label-position="left" label-width="120px">

        <el-form-item label="快递公司" prop="expressId">
          <el-select filterable v-model="expressData.expressId" placeholder="请选择">
            <el-option v-for="item in express_companies" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单号" prop="expressNo">
          <el-input v-model="expressData.expressNo" placeholder="订单号"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="doSendOrder">确定发货</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let paymentTypeFilter = ["积分支付", "微信支付", "支付宝支付"];
  let paymentTypetagFilter = ["success", "warning", "info", "danger"];

  let statusFilter = ["待付款", "已付款", "已退款", "部分退款"];
  let statustagFilter = ["success", "warning", "info", "danger"];

  export default {
    data() {
      return {
        dialogSendDialog: false,
        total: 0,
        expressData: {
          expressId: "",
          expressNo: ""
        },
        express_companies: [],
        paymentTypeFilter: paymentTypeFilter,
        statusFilter: statusFilter,
        rules: {
          expressNo: [{
            required: true,
            message: "请输入快递单号",
            trigger: "change"
          }],
          expressId: [{
            required: true,
            message: "请选择快递公司",
            trigger: "change"
          }]
        }
      };
    },
    created() {
      this.init("order_record", 1).loadData();
      this.$post("/admin/refund/express_companies").then(data => {
        this.express_companies = data;
      });
    },
    filters: {
      paymentTypeFilter(status) {
        return paymentTypeFilter[parseInt(status)];
      },
      paymentTypetagFilter(status) {
        return paymentTypetagFilter[parseInt(status)];
      },

      statusFilter(status) {
        return statusFilter[parseInt(status)];
      },
      payStatusFilter(status) {
        if (status > 0) {
          return "success";
        }
        return "warning";
      },
      statustagFilter(status) {
        return statustagFilter[parseInt(status)];
      }
    },
    methods: {
      doSendOrder() {
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            this.submiting = true;
            let row = this.currentRow || {};
            let expressData = this.expressData;
            this.$post("/admin/order_record/sendOrderItem", {
              recordItemId: row.itemId,
              expressNo: expressData.expressNo,
              expressId: expressData.expressId
            }).then(res => {
              this.submiting = false;
              this.$$notify();
              this.dialogSendDialog = false;
              this.loadData();
              this.expressData = {
                expressId: "",
                expressNo: ""
              };
            }).catch(_ => {
              this.submiting = false;
            });
          }
        });
      },
      sendOrder(row) {
        this.dialogSendDialog = true;
        this.currentRow = row;
      },
      exportExcelFile() {
        this.exportExcel({
          title: "订单列表",
          fields: [{
              field: "userName",
              title: "会员名"
            },

            {
              field: "paymentType",
              title: "支付方式",
              valueMap: ["积分支付", "微信支付", "支付宝支付"]
            },

            {
              field: "price",
              title: "订单金额(元)"
            },

            {
              field: "status",
              title: "订单状态",
              valueMap: ["待付款", "已付款", "已退款", "部分退款"]
            },

            {
              field: "createTime",
              title: "下单时间"
            },

            {
              field: "orderNo",
              title: "订单号"
            },

            {
              field: "outTradeNo",
              title: "支付订单号"
            },

            {
              field: "transactionId",
              title: "订单交易号"
            }
          ]
        }).then(info => {
          this.openWin(info);
        });
      }
    }
  };

</script>
<style>
  .goods-item {
    overflow: hidden;
  }
  .goods-item  + .goods-item {
    margin-top: 20px;
  }

  .goods-cover {
    width: 100px;
    float: left;
  }

.goods-price-po{
  padding-top: 15px;
}
  .goods-txt {
    margin-left: 110px;
  }

  .btn-area {
    padding-top: 15px;
  }

  .goods-title {
    padding-bottom: 15px;
    padding-top: 0;
    font-size: 16px;
  }

  .goods-num {
    padding-bottom: 10px;
  }

  .address-info{
    padding:0 0  20px 0;
    line-height: 2em;
  }

</style>
